<template>
  <div class="app-container">
    <page-header
      title="预约开放设置"
      desc="预约设置可全局控制开放及按日期进行开放设置，全局关闭后日期设置将不会生效"
    >
      <div
        v-if="closeRule"
        class="d-flex justify-content-between"
      >
        <el-switch
          :value="closeRule.status"
          style="display: block"
          active-color="#13ce66"
          :active-value="0"
          :inactive-value="10"
          inactive-color="#ff4949"
          active-text="开放预约"
          inactive-text="关闭预约"
          @change="onToggleBook"
        />
      </div>
    </page-header>
    <el-container v-if="closeRule && !closeRule.status">
      <el-aside width="600px">
        <calendar
          v-model="value"
          :meta-dates="holiday"
        />

      </el-aside>
      <el-main class="py-0">
        <em-alert
          type="warning"
          :title="$moment(value).locale('zh-CN').format('ll')"
          description="您可以对当前日期进行预约开放设置："
          icon="shape-tools-compass"
          effect="outline"
          size="large"
          :closable="false"
        >
          <el-switch
            :value="activeDate.status"
            style="display: block"
            active-color="#13ce66"
            :active-value="10"
            :inactive-value="0"
            inactive-color="#ff4949"
            active-text="开放预约"
            inactive-text="关闭预约"
            @change="onChangeDateStatus"
          />
        </em-alert>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import PageHeader from '@/components/PageHeader'
import Calendar from '@/components/Calendar'
export default {
  components: {
    PageHeader,
    Calendar
  },
  data() {
    return {
      value: new Date(),
      selectedDates: [],
      holiday: [],
      closeRule: {
        status: 0
      }
    }
  },
  computed: {
    year() {
      return this.value.getFullYear()
    },
    activeDate() {
      var valueDate = this.$moment(this.value).format('YYYY-MM-DD')
      var date = this.holiday.find(item => {
        return item.date === valueDate
      })
      return {
        id: 0,
        date: valueDate,
        status: 0,
        ...date
      }
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      console.log(this.year)
      this.$http.system.bookRule().then(res => {
        this.closeRule = res.data
      })
      this.$http.system
        .holiday({
          year: this.year
        })
        .then(res => {
          this.holiday = res.data
        })
    },
    onToggleBook(status) {
      const params = Object.assign({}, this.closeRule, { status: status })
      console.log(params, status)
      this.$http.system.bookRuleToggle(params, params.id).then(res => {
        this.closeRule = res.data
      })
    },
    onChangeDateStatus(status) {
      const params = Object.assign({}, this.activeDate, { status: status })
      console.log(params, status)
      this.$http.system.holidayUpdate(params, params.id).then(res => {
        this.holiday.push(res.data)
        var changeDate = res.data
        var activeIndex = this.holiday.findIndex(item => {
          return item.date === changeDate.date
        })
        this.holiday[activeIndex] = changeDate
      })
    },
    // 是否选中日期
    isSelected: function(slotDate, slotData) {
      return this.selectedDates.includes(slotData.day)
    },
    // 是否节假日
    isFestival(slotDate, slotData) {
      var holiday = this.holiday.find(item => {
        return item.date === slotData.day
      })
      return holiday && holiday.workday
    },
    dateClasses(slotDate, slotData) {
      var holiday = this.holiday.find(item => {
        return item.date === slotData.day
      })
      if (holiday) {
        return {
          holiday: !holiday.workday,
          overtime: holiday.overtime
        }
      }
      return null
    },
    dateMeta(slotDate, slotData) {
      var holiday = this.holiday.find(item => {
        return item.date === slotData.day
      })
      if (holiday) {
        return holiday.holiday
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-calendar {
  &__body {
    padding: 0;
  }
  &-day {
    padding: 0;
    height: auto;
  }
  &-table {
    thead > th {
      text-align: center;
    }
  }
  &-table:not(.is-range) td.next,
  &-table:not(.is-range) td.prev {
    opacity: 0.6;
  }
}
.square-box {
  > * {
    border: 2px solid transparent;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &::before {
      position: absolute;
      left: 10px;
      top: 10px;
    }
    h2 {
      margin: 0;
      flex: 2;
      line-height: 1;
      align-self: center;
    }
    p {
      margin: 0;
      font-size: 12px;
      color: gray;
      flex: 1;
      line-height: 1;
      align-self: center;
    }
  }
}
.is-selected {
  border: 2px solid #f660f6;
}
.holiday {
  background: #fde3e4;
  color: red;
  &::before {
    content: '休';
  }
}
.overtime {
  background: #f5f5f6;
  &::before {
    content: '班';
  }
}
</style>
